<template>
  <div style="margin-top: 50px">
    <el-form :model="form" ref="productSaleForm" label-width="120px" class="form-inner-container" size="small">
      <el-form-item label="赠送积分：">
        <el-input v-model="form.giftPoint"></el-input>
      </el-form-item>
      <el-form-item label="赠送成长值：">
        <el-input v-model="form.giftGrowth"></el-input>
      </el-form-item>
      <el-form-item label="积分购买限制：">
        <el-input v-model="form.usePointLimit"></el-input>
      </el-form-item>
      <el-form-item label="预告商品：">
        <el-switch v-model="form.previewStatus" :active-value="1" :inactive-value="0"> </el-switch>
      </el-form-item>
      <el-form-item label="商品上架：">
        <el-switch v-model="form.publishStatus" :active-value="1" :inactive-value="0"> </el-switch>
      </el-form-item>
      <el-form-item label="商品推荐：">
        <span style="margin-right: 10px">新品</span>
        <el-switch v-model="form.newStatus" :active-value="1" :inactive-value="0"> </el-switch>
        <span style="margin-left: 10px; margin-right: 10px">推荐</span>
        <el-switch v-model="form.recommandStatus" :active-value="1" :inactive-value="0"> </el-switch>
      </el-form-item>
      <el-form-item label="服务保证：">
        <el-checkbox-group v-model="selectServiceList">
          <el-checkbox :value="1">无忧退货</el-checkbox>
          <el-checkbox :value="2">快速退款</el-checkbox>
          <el-checkbox :value="3">免费包邮</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="详细页标题：">
        <el-input v-model="form.detailTitle"></el-input>
      </el-form-item>
      <el-form-item label="详细页描述：">
        <el-input v-model="form.detailDesc"></el-input>
      </el-form-item>
      <el-form-item label="商品关键字：">
        <el-input v-model="form.keywords"></el-input>
      </el-form-item>
      <el-form-item label="商品备注：">
        <el-input v-model="form.note" type="textarea" :autoSize="true"></el-input>
      </el-form-item>
      <el-form-item label="选择优惠方式：">
        <el-radio-group v-model="form.promotionType" size="small">
          <el-radio-button :value="0">无优惠</el-radio-button>
          <el-radio-button :value="1">特惠促销</el-radio-button>
          <el-radio-button :value="2">会员价格</el-radio-button>
          <el-radio-button :value="3">阶梯价格</el-radio-button>
          <el-radio-button :value="4">满减价格</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.promotionType === 1">
        <el-form-item label="促销时间">
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="促销价格">
          <el-input v-model="form.promotionPrice" placeholder="输入促销价格"></el-input>
        </el-form-item>
      </template>
      <template v-if="form.promotionType === 2">
        <el-form-item
          v-for="(item, index) in form.memberPriceList"
          :key="item.memberLevelId"
          :label="item.memberLevelName"
          :class="{ littleMargin: index !== 0 }"
        >
          <el-input v-model="item.memberPrice"></el-input>
        </el-form-item>
      </template>
      <el-form-item v-show="form.promotionType === 3">
        <el-table :data="form.productLadderList" height="100%" style="width: 100%" border>
          <el-table-column label="数量" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.count"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="折扣" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.discount"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" width="120" label="操作">
            <template #default="scope">
              <el-button type="danger" link @click="handleRemoveProductLadder(scope.$index)">删除</el-button>
              <el-button type="primary" link @click="handleAddProductLadder">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item v-show="form.promotionType === 4">
        <el-table :data="form.productFullReductionList" height="100%" border>
          <el-table-column label="满" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.fullPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="立减" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.reducePrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" width="120" label="操作">
            <template #default="scope">
              <el-button type="danger" link @click="handleRemoveFullReduction(scope.$index)">删除</el-button>
              <el-button type="primary" link @click="handleAddFullReduction">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="small" @click="handlePrev">上一步</el-button>
        <el-button type="primary" size="small" @click="handleNext">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { fetchList as fetchMemberLevelList } from '@/api/memberLevel'
import { computed, defineProps, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
defineOptions({
  name: 'ProductSaleDetail',
})

const route = useRoute()
const emit = defineEmits(['prevStep', 'nextStep', 'update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({}),
  },
})
const form = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
const timeRange = computed({
  get() {
    return [form.value.promotionStartTime, form.value.promotionEndTime]
  },
  set(value) {
    if (value) {
      form.value.promotionStartTime = value[0]
      form.value.promotionEndTime = value[1]
    }
  },
})
onMounted(async () => {
  if (!route.query.id) {
    const response = await fetchMemberLevelList({ defaultStatus: 0 })
    form.value.memberPriceList = response.data.data.map((item: any) => ({
      memberLevelId: item.id,
      memberLevelName: item.name,
    }))
  }
})
const selectServiceList = computed({
  get() {
    return form.value.serviceIds?.split(',')
  },
  set(newValue) {
    form.value.serviceIds = newValue.join(',')
  },
})
function handleRemoveProductLadder(index: number) {
  const { productLadderList } = form.value
  productLadderList.splice(index, 1)
  if (productLadderList.length === 0) {
    productLadderList.push({ count: 0, discount: 0, price: 0 })
  }
}
function handleAddProductLadder() {
  const { productLadderList } = form.value
  if (productLadderList.length < 3) {
    productLadderList.push({ count: 0, discount: 0, price: 0 })
  } else {
    ElMessage.warning('最多只能添加三条')
  }
}
function handleRemoveFullReduction(index: number) {
  const { productFullReductionList } = form.value
  productFullReductionList.splice(index, 1)
  if (productFullReductionList.length === 0) {
    productFullReductionList.push({ fullPrice: 0, reducePrice: 0 })
  }
}
function handleAddFullReduction() {
  const { productFullReductionList } = form.value
  if (productFullReductionList.length < 3) {
    productFullReductionList.push({ fullPrice: 0, reducePrice: 0 })
  } else {
    ElMessage.warning('最多只能添加三条')
  }
}
function handlePrev() {
  emit('prevStep')
}
function handleNext() {
  emit('nextStep')
}
</script>

<style scoped>
.littleMargin {
  margin-top: 10px;
}
</style>
